<template>
  <div class="flex flexColumn flex1">
    <div class="title">
      <span>首页</span>
    </div>
    <div class="flex homemain">
      <div class="flex homemain-tab">
        <i class="el-icon-document-checked c845460"></i>
        <div class="homemain-text">
          <p>总订单</p>
          <h6>{{ dataObj.totalOrder }}</h6>
        </div>
      </div>
      <div class="flex homemain-tab">
        <i class="el-icon-goods cff8882"></i>
        <div class="homemain-text">
          <p>总销售额</p>
          <h6>{{ dataObj.totalAmount }}</h6>
        </div>
      </div>
      <div class="flex homemain-tab">
        <i class="el-icon-tickets c206a5d"></i>
        <div class="homemain-text">
          <p>今日订单数</p>
          <h6>{{ dataObj.todayOrder }}</h6>
        </div>
      </div>
      <div class="flex homemain-tab">
        <i class="el-icon-date c2b4f60"></i>
        <div class="homemain-text">
          <p>今日销售额</p>
          <h6>{{ dataObj.totayAmount }}</h6>
        </div>
      </div>
    </div>
    <div class="mainChart" style="height: 400px" ref="main"></div>
  </div>
</template>

<script>
import { totaldata } from "@/apis/statistics.js";
import * as echarts from "echarts";
export default {
  name: "echarts",
  data() {
    return {
      dataObj: {},
    };
  },
  created() {
    this.reTotaldata();
  },
  mounted() {
    this.initEcharts();
  },
  computed: {
    options() {
      let that = this;
      let option = {
        title: {
          text: "店铺数据",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: ["商品统计", "订单统计"],
        },

        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: that.dataObj.xData,
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],

        series: [
          {
            name: "商品统计",
            type: "line",
            stack: "总量",
            areaStyle: {},
            data: that.dataObj.amountData,
          },
          {
            name: "订单统计",
            type: "line",
            stack: "总量",
            areaStyle: {},
            data: that.dataObj.orderData,
          },
        ],
      };
      return option;
    },
  },
  methods: {
    reTotaldata() {
      totaldata().then((res) => {
        this.dataObj = res.data;
        console.log(this.dataObj);
      });
    },
    initEcharts() {
      let myChart = echarts.init(this.$refs.main);
      myChart.setOption(this.options, true);
    },
    //   },
  },
  watch: {
    //观察option的变化
    options: {
      handler(newVal, oldVal) {
        if (this.myChart) {
          if (newVal) {
            this.myChart.setOption(newVal);
          } else {
            this.myChart.setOption(oldVal);
          }
        } else {
          this.initEcharts();
        }
      },
      deep: true, //对象内部属性的监听，关键。
    },
  },
};
</script>

<style lang="less" scoped>
.c845460 {
  color: #845460;
}
.cff8882 {
  color: #ff8882;
}
.c206a5d {
  color: #206a5d;
}
.c2b4f60 {
  color: #2b4f60;
}

.homemain {
  flex: 1;
  padding-left: 18px;
  .homemain-tab {
    width: 200px;
    height: 80px;
    margin-right: 10px;
    background-color: #fff;
    padding-right: 10px;
    i {
      font-size: 50px;
      padding: 40px;
      margin-top: -24px;
      margin-left: -20px;
    }
    .homemain-text {
      align-self: center;
      p {
        color: #706c61;
        padding-bottom: 4px;
      }
    }
  }
}
.mainChart {
  margin-top: 40px;
  padding-left: 20px;
}
</style>